<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>发票</title>
		<meta name="keywords" content="KEYWORDS..." />
		<meta name="description" content="DESCRIPTION..." />
		<meta name="author" content="DeathGhost" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon/apple-touch-icon-57x57-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/icon/apple-touch-icon-120x120-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="196x196" href="images/icon/apple-touch-icon-196x196-precomposed.png">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<script src="js/jquery.js"></script>
		<style>
		
			#dialogBg {
				width: 100%;
				height: 100%;
				background-color: #000000;
				opacity: .8;
				filter: alpha(opacity=60);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				display: none;
			}
			
			#dialog {
				width: 80%;
				display: none;
				background-color: #ffffff;
				position: fixed;
				top: 20%;
				left: 10%;
				z-index: 10000;
			}
			
			.dialogTop {
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px dotted #ccc;
				letter-spacing: 1px;
				padding: 10px 0;
				text-align: right;
			}
			.dialogTop a{color: #ccc;}
			.dialogIco {
				width: 50px;
				height: 50px;
				position: absolute;
				top: -25px;
				left: 50%;
				margin-left: -25px;
			}
			
			.editInfos {padding-bottom: .3rem;}
			
			.editInfos input {display: block;width: 80%;margin:.3rem auto auto;}
			
			.ipt {border: 1px solid #ccc;padding: 5px;}
			
			.ipt:focus {
				outline: none;
				border-color: #66afe9;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
				-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
			}
			
			.submitBtn {
				cursor: pointer;
				display: inline-block;
				border-radius: 5px;
				-webkit-border-radius: 5px;
				text-align: center;
				background-color: #27C400;
				color: #fff;
				font-size: .3rem;
				padding: .2rem 0;
			}
			input{background-color:transparent; border-color:transparent;-webkit-appearance: none;}
		</style>
	</head>

	<body style="background-color: #dce6dd;">
		<div class="invoiceCon">
			<div class="invoice">
				<span><input type="radio" name="radiobutton" value="radiobutton" checked> 普通发票 </span>
				<span><input type="radio" name="radiobutton" value="radiobutton" checked> 专用发票</span>
			</div>
			<ul class="invoice-list-choose">
				<li class="prettys">
				  <span class="invoiceimg">
				  	<input type="checkbox" name="" id="" value="" />
				  </span>
				  <label><i class="mdi mdi-check"></i> 抬头一</label>
				</li>
				<li class="prettys">
				  <span>
				  	<input type="checkbox" name="" id="" value="" />
				  </span>
				  <label><i class="mdi mdi-check"></i> 抬头一</label>
				</li>
				<li class="prettys">
				  <span>
				  	<input type="checkbox" name="" id="" value="" />
				  </span>
				  <label><i class="mdi mdi-check"></i>抬头一</label>
				</li>
				<li class="prettys">
				  <span>
				  	<input type="checkbox" name="" id="" value="" />
				  </span>
				  <label><i class="mdi mdi-check"></i> 抬头一</label>
				</li>			
			</ul>
			<div class="addInvoice"><a href="javascript:;" class="bounceIn" style="color:#707471;">+新增抬头</a></div>
			<div class="billing"><a href="#">开票</a></div>
		</div>
		
		
		<!--弹窗内容-->
		<div id="wrapper">
			<div class="box">
				<div id="dialogBg"></div>
				<div id="dialog" class="animated">
					<div class="dialogTop">
						<a href="javascript:;" class="claseDialogBtn">关闭</a>
					</div>
					<form action="" method="post" id="editForm">
						<ul class="editInfos">
							<input type="text" name="" required value="" class="ipt"  placeholder="请输入您的抬头"/>
							<input type="text" name="" required value="" class="ipt" placeholder="请输入您的税号" />
							<input type="submit" value="确认提交" class="submitBtn" />
						</ul>
					</form>
				</div>
			</div>

		</div>
		
		
		
		
		
		<!--弹窗-->
		<script type="text/javascript">
			var w, h, className;

			function getSrceenWH() {
				w = $(window).width();
				h = $(window).height();
				$('#dialogBg').width(w).height(h);
			}

			window.onresize = function() {
				getSrceenWH();
			}
			$(window).resize();

			$(function() {
				getSrceenWH();

				//显示弹框
				$('.bounceIn').click(function() {
					className = $(this).attr('class');
					$('#dialogBg').fadeIn(300);
					$('#dialog').removeAttr('class').addClass('animated ' + className + '').fadeIn();
				});

				//关闭弹窗
				$('.claseDialogBtn').click(function() {
					$('#dialogBg').fadeOut(300, function() {
						$('#dialog').addClass('bounceOutUp').fadeOut();
					});
				});
			});
		</script>
		<script type="text/javascript">		
			$(".prettys span").click(function(){
	        if($(this).hasClass("invoiceimg")){
	        	 $(this).removeClass(" invoiceimg") ;
	        }else{
	        	 $(this).addClass(" invoiceimg") ;
	        }
	    });
	</script>
	
	
	</body>

</html>